﻿
@{
    ViewData["Title"] = "Main";
    Layout = "~/Views/Shared/_List.cshtml";
}



<div style="background-color: #f1f2f7;padding-top:10px;padding-right: 10px;padding-left: 10px;">
    <div class="layui-row layui-col-space25">
        <div class="layui-col-md12 layui-anim layui-anim-scale">
            <div class="layui-card">
                <div class="layui-card-body vae-card">
                    <a href="javascript:;" onclick="layerT(3);">
                        <marquee direction="left">云南省河湖长设置情况：云南省共设置河湖长36894人，涉及河流4895条，湖泊1568个，水库1548座，沟渠2548条；其中省级河长20人，州级河长300人，县（市）级河长2054人，乡镇级河长4689人，村级河长15897人；三员（巡查员、保洁员、管理员）56479人。</marquee>
                    </a>
                    <a id="test1" href="javascript:;" onclick="layerT(1);" style="color:red">
                        <marquee direction="left">明天中午12点在1号会议室进行视频会商，请确认是否能参与，谢谢！</marquee>
                    </a>
                    <a id="test2" href="javascript:;" onclick="layerT(2);" style="color:red">
                        <marquee direction="left">请各位河长注意，每年巡河次数不得少于2次，谢谢！</marquee>
                    </a>
                </div>
            </div>
        </div>
        <div class="layui-col-md8">
            <div class="layui-row layui-col-space25">
                <div class="layui-col-md6 layui-anim layui-anim-scale">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <table id="comments" lay-filter="comments"></table>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6 layui-anim layui-anim-scale">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <table id="message" lay-filter="message"></table>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12 layui-anim layui-anim-scale">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div class="vaeyo-main-header" id="container" style="height:300px;">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-anim layui-anim-scale">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-table" lay-skin="nob" lay-size="sm">
                        <colgroup>
                            <col width="100">
                            <col>
                        </colgroup>
                        <tbody>
                            <tr>
                                <td><b>我的河流</b></td>
                                <td><a href="javascript:;"><span class="layui-badge">3</span></a> 条</td>
                            </tr>
                            <tr>
                                <td><b>我的河长</b></td>
                                <td><a href="javascript:;"><span class="layui-badge layui-bg-blue">5</span></a> 名</td>
                            </tr>
                            @*<tr>
                                <td><b>河湖统计</b></td>
                                <td><a href="javascript:;"><span class="layui-badge-rim">30</span></a> 条</td>
                            </tr>
                            <tr>
                                <td><b>河长统计</b></td>
                                <td><a href="javascript:;"><span class="layui-badge-rim">26</span></a> 名</td>
                            </tr>*@
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="layui-col-md4 layui-anim layui-anim-scale">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-table" lay-skin="" lay-size="sm">
                        <colgroup>
                            <col width="150">
                            <col>
                        </colgroup>
                        <tbody>
                            <tr>
                                <td><b>最近日程</b></td>
                                <td><b>计划时间</b></td>
                            </tr>
                            <tr>
                                <td>组织巡河</td>
                                <td>2019-03-20</td>
                            </tr>
                            <tr>
                                <td>视频会议</td>
                                <td>2019-03-21 9:30</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-anim layui-anim-scale">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-table" lay-skin="" lay-size="sm">
                        <colgroup>
                            <col width="150">
                            <col>
                        </colgroup>
                        <tbody>
                            <tr>
                                <td><b>水质警示</b></td>
                                <td><b>水质类别</b></td>
                            </tr>
                            <tr>
                                <td>滇池</td>
                                <td><span class="layui-badge layui-bg-orange">Ⅳ</span> 类</td>
                            </tr>
                            <tr>
                                <td>盘龙江</td>
                                <td><span class="layui-badge layui-bg-green">Ⅲ</span> 类</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-md2 layui-anim layui-anim-scale">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-btn-container" style="padding:3px 0">
                        <div><a class="layui-btn layui-btn-fluid layui-btn-primary" href="http://www.mwr.gov.cn/ztpd/gzzt/hzz/" target="_blank">水利部河长制官网</a></div>
                        <div><a class="layui-btn layui-btn-fluid layui-btn-primary" href="javascript:;">常用网址2</a></div>
                        <div><a class="layui-btn layui-btn-fluid layui-btn-primary" href="javascript:;">常用网址3</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md2 layui-anim layui-anim-scale">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-btn-container" style="padding:3px 0">
                        <div><a class="layui-btn layui-btn-fluid layui-btn-primary" href="javascript:;" target="_blank">操作指南</a></div>
                        <div><a class="layui-btn layui-btn-fluid layui-btn-primary" href="javascript:;" target="_blank">常用网址5</a></div>
                        <div><a class="layui-btn layui-btn-fluid layui-btn-primary" href="javascript:;" target="_blank">常用网址6</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="~/lib/Echarts/echarts.min.js"></script>
<script>
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var dataAxis = ['昆明', '楚雄', '玉溪', '保山', '文山', '大理', 'x', 'x', 'x'];
    var data = [220, 182, 191, 234, 290, 330, 310, 123, 442];
    var yMax = 500;
    var dataShadow = [];

    for (var i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
    }

    option = {
        title: {
            text: '各地河长总人数统计图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            data: dataAxis,
            axisTick: {
                alignWithLabel: true,
                show: true
            },
            axisLine: {
                show: false
            },
            z: 10
        },
        yAxis: {
            axisLine: {
                show: true
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#999'
                }
            }
        },
        dataZoom: [
            {
                type: 'inside'
            }
        ],
        series: [
            { 
                type: 'bar',
                itemStyle: {
                    normal: { color: 'rgba(0,0,0,0.05)' }
                },
                barGap: '-100%',
                barCategoryGap: '40%',
                animation: true
            },
            {
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ]
                        )
                    },
                    emphasis: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#2378f7' },
                                { offset: 0.7, color: '#2378f7' },
                                { offset: 1, color: '#83bff6' }
                            ]
                        )
                    }
                },
                data: data
            }
        ]
    };

    // Enable data zoom when user click bar.
    var zoomSize = 6;
    myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
    });
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<script>
    var table;
    var $;
    layui.use(['table'], function () {
        $ = layui.jquery;
        var form = layui.form;
        table = layui.table;
        table.render({
            elem: '#comments'
            , height: 250
            , url: '/TestData/tzgg.json' //数据接口
            , page: false //开启分页
            , cols: [[ //表头
                { field: 'tzgg', title: '通知公告' }
            ]]
        });
        table.render({
            elem: '#message'
            , height: 250
            , url: '/TestData/tzgg.json' //数据接口
            , page: false //开启分页
            , cols: [[ //表头
                { field: 'tzgg', title: '媒体聚焦' }
            ]]
        });
    });
    function layerT(x) {
        if (x == 1) {
            layer.confirm('明天中午12点在1号会议室进行视频会商，请确认是否能参与，谢谢！', {
                title: "信息推送",
                btn: ['接收邀请', '不接受邀请'] //按钮
            }, function () {
                layer.msg('您已接受会议邀请，请注意按时参加', { icon: 1 });
            });
            $("#test" + x).hide();
        }
        else if (x==3) {
            layer.confirm('云南省共设置河湖长36894人，涉及河流4895条，湖泊1568个，水库1548座，沟渠2548条；其中省级河长20人，州级河长300人，县（市）级河长2054人，乡镇级河长4689人，村级河长15897人；三员（巡查员、保洁员、管理员）56479人。', {
                title: "云南省河湖长设置情况"
            });
        }
        else {
            layer.confirm('请各位河长注意，每年巡河次数不得少于2次，谢谢！', {
                title: "信息推送",
                btn: ['确认收到', '置之不理'] //按钮
            }, function () {
                layer.closeAll();
                $("#test" + x).hide();
            });
        }

    };
</script>
<div class="layui-layer-move"></div>



